<template>
 <div class="userDialog">
  <!-- 修改用户的对话框 -->
  <el-dialog title="编辑个人信息" v-model="this.updateUserDialogVisible" width="50%" @close="editDialogClosed"
  :close-on-click-modal='false'>
    <!-- 内容主体区 -->
    <el-form 
    :model="editUserForm"  
    ref="edituserForm"
    :rules="rules"
    status-icon 
    label-width="70px">
      <el-form-item label="昵称" prop="nickname">
        <el-input  v-model="editUserForm.nickname" :value="this.user.nickname"></el-input>
      </el-form-item>
      <el-form-item label="姓名" prop="realName" class="realname">
        <el-input  v-model="editUserForm.realName" :value="this.user.realName"></el-input>
      </el-form-item>
       <el-form-item class="radio" label="性别">
        <el-radio-group v-model="editUserForm.sex">
          <el-radio :label="0" size="large">女</el-radio>
          <el-radio :label="1" size="large">男</el-radio>
        </el-radio-group>
       </el-form-item>
       <el-form-item label="签名" prop="signature">
        <el-input  v-model="editUserForm.signature" :value="this.user.signature"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input  v-model="editUserForm.email" :value="this.user.email"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="phone">
        <el-input  v-model="editUserForm.phone" :value="this.user.phone"></el-input>
      </el-form-item>
    </el-form>
    <!-- 底部区 -->
    <span slot="footer" class="dialog-footer">
      <el-button type="success" plain @click="this.updateuserDialog">取 消</el-button>
      <el-button type="success" @click="updateUser()">确 定</el-button>
    </span>
  </el-dialog>
 </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex';
import api from '@/api/user_index.js';
 export default {
  name: '' ,
 data () {
var checkPhone = (rule, value, callback) => {
      console.log("电话:", value);
      if (value.trim() == "") {
        callback(new Error("请输入电话"));
      } else if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        callback(new Error("电话输入错误！"));
      } else {
        callback();
      }
    };
var checkEmail = (rule, value, callback) => {
            if (!value) {
                return callback();
            }
            if (value) {
                setTimeout(() => {
                    var reg = /^([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|.]?)*[a-zA-Z0-9]+.[a-zA-Z]{2,3}$/;
                    if (!reg.test(value)) {
                        callback(new Error('请输入有效的电子邮箱！'));
                    } else {
                        callback();
                    }
                }, 500);
            }
        };
 return {
    editUserForm: {
      nickname: '',
      realName: '',
      sex: 0,
      email: '',
      phone: '',
      signature:''
    },
    rules:{
     email: [{ required: true, message: '请输入邮箱', validator: checkEmail, trigger: "blur" }],
     nickname: [{ required: true, message:'请输入用户名', trigger: "blur" }],
     realName: [{ message:'请输入真实姓名', trigger: "blur" }],
     phone: [{ required: true, message: '请输入手机号', validator: checkPhone, trigger: "blur" }],
     signature: [{ message: '请输入个性签名', trigger: "blur" }],
   },
  }
 },
   computed:{
  ...mapState('moduleDialog',['updateUserDialogVisible']),
  ...mapState('moduleUser',['user']),
 },
 mounted(){
  this.geteditUserForm()
 },
  methods:{
  ...mapMutations('moduleDialog',['updateuserDialog']),
  ...mapMutations('moduleUser',['updateUserFrom']),
  geteditUserForm(){
    this.editUserForm = this.user
  },
  updateUser() {
    console.log('ok')
    api.updateUser(this.editUserForm).then((res) => {
      // console.log(res)
      if(res.code == 200){
        this.$alert('','修改成功！',{
          confirmButtonText: '确定',
          callback: () => {
           this.updateuserDialog()
           this.updateUserFrom(this.editUserForm)
           api.getUser()
          }
        })
      }else{
        this.$alert('请重试！','修改失败！',{
          confirmButtonText: '确定',
        })
      }
    }).catch(error => {
      console.log(error)
    })
  }
 }
}

</script>
<style scope lang="less">
.dialog-footer{
  display: flex;
  justify-content: space-evenly;
}
.el-dialog__headerbtn .el-dialog__close{
  color: #333;

}
.realname{
  margin-bottom: 10px;
}
.radio{
  align-items: center;
  vertical-align: middle;
  margin-bottom: 10px;
}
</style>